<template>
	<view class="myContent">
		<u-loading-page :loading="loading" loading-text=" "></u-loading-page>
		<u-empty mode="car" v-if="list.length === 0" text="暂无消费记录"></u-empty>
		<view class="u-page">
			<u-list @scrolltolower="scrolltolower" @scrolltoupper='scrolltoupper'>
				<u-list-item v-for="(item, index) in list" :key="index">
					<view class="card_container">
						<view class="my_card">
							<view class="first_cloumn">
								<view class="paiwei_num" v-if="item.consume_queue_num">{{item.consume_queue_num}}
								</view>
								<view class="paiwei_num" v-else>0</view>
								<view class="paiwei">排位</view>
							</view>
							<view class="divider"></view>
							<view class="second_cloumn">
								<view class="second_bs"
									v-if="item.business_store_name === null||item.business_store_name == ''">0</view>
								<view class="second_bs" v-else>{{item.business_store_name}}</view>
								<view class="second_amount">{{$mytools.regFenToYuan(item.consume_amount)}}</view>
								<view class="second_pay_time">{{$mytools.formatTimestamp(item.consume_time)}}</view>
							</view>
							<view class="divider"></view>
							<view class="third_cloumn">
								<view class="allowence_status">
									{{item.consume_status==1?'补贴中':item.consume_status==2?'已完成':item.consume_status==3?'已退出':'补贴中'}}
								</view>
							</view>
						</view>
						<view class="button_list">
							<view class="queue_button">
								<button class="button_word_queue" v-if="item.consume_status==1"
									@click="gotoJumpQueuePage(item)">去插队</button>
								<button class="button_word_queue_disable" v-else>去插队</button>
							</view>
							<view class="exit_button">
								<button class="button_word_exit" v-if="item.consume_status==1"
									@click="exitQueue">申请退出</button>
								<button class="button_word_exit_disable" v-else>申请退出</button>
							</view>
							<view class="allowence_button">
								<button class="button_word_allowence"
									v-if="item.join_platform_guarantee_plan == 1 && item.consume_status==1"
									@click="jiasubutie">加速补贴</button>
								<button class="button_word_allowence_disable"
									v-else-if="item.join_platform_guarantee_plan == 1">加速补贴</button>
								<button class="button_word_allowence_disable" v-else>不可加速</button>
							</view>
						</view>
					</view>
				</u-list-item>
			</u-list>
		</view>
		<u-loadmore v-show="list.length>size" :status="status" icon-type="flower" bg-color="transperant" margin-top="30"
			margin-bottom="30" />

	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				list: [],
				userType: 0,
				size: 10,
				loading: true,
				// nomore，loading，loadmore
				status: 'loadmore',
				timer: null,
			}
		},
		onLoad() {
			// 初始化参数
			this.list = []
			this.status = 'loadmore'
			this.userType = uni.getStorageSync(app.globalData.session.userAccountType)
			// 开启下拉刷新
			uni.startPullDownRefresh();
			// do something
			this.loadmore()
		},
		onPullDownRefresh() {
			this.loading = true
			this.list = []
			this.status = 'loadmore'
			console.log('onPullDownRefresh');
			// 判断是否在查询中，防止多次下拉
			if (this.status == 'loading' || this.status == 'nomore') {
				console.log('正在刷新');
				uni.hideLoading()
				return;
			}
			this.loadmore()
			uni.stopPullDownRefresh();
			this.timer = setTimeout(function() {
				uni.stopPullDownRefresh();
				// 加载框和下拉加载一起消失，此处不需要，调用loadmare完成后会设置为false
				// this.loading = false
			}, 500);
		},
		onReachBottom() {
			console.log('onReachBottom');
			//避免多次触发
			if (this.status == 'loading' || this.status == 'nomore') {
				return;
			}
			this.loadmore()
		},
		methods: {
			loadmore() {
				if (this.status == 'loading' || this.status == 'nomore') {
					return;
				}
				if (this.userType == 1) {
					this.loadmoreUserComsumeRecord()
				} else if (this.userType == 2) {
					uni.showToast({
						title: '请切换至用户端查看',
						icon: 'none'
					})
					setTimeout(function() {
						uni.switchTab({
							url: '/pages/newMy/myCenter',
							complete() {
								uni.hideToast()
							}
						})
					}, 1500);
				}
			},
			// 顶部
			scrolltoupper() {
				console.log('scrolltoupper');
				this.list = []
				this.status = 'loadmore'
				this.userType = uni.getStorageSync(app.globalData.session.userAccountType)
				// do something
				this.loadmore()
			},
			// 底部
			scrolltolower() {
				console.log('scrolltolower');
				this.loadmore()
			},
			async loadmoreUserComsumeRecord() {
				this.loading = true
				this.status = "loading";
				let that = this
				let userinfo = uni.getStorageSync(app.globalData.session.userInfo)
				let result = await uniCloud.callFunction({
					name: 'zhy-consume-record-query',
					data: {
						user_id: userinfo.user_id,
						skip: that.list.length,
						size: that.size,
						queryType: 2
					}
				})
				if (result.result.length < that.size) {
					// 没有更多了
					this.status = "nomore"
				} else {
					// 加载更多
					this.status = "loadmore"
				}
				// this.status = "loadmore"
				console.log('list:' + JSON.stringify(result));
				if (this.list.length > 0 && result.result.length > 0) {
					if (this.list[0]._id === result.result[0]._id) {
						console.log('多次下拉刷新');
						this.list = []
					}
				}
				this.list = this.list.concat(result.result)
				console.log('list:' + JSON.stringify(that.list));

				uni.stopPullDownRefresh();
				this.loading = false
			},
			jiasubutie() {
				console.log('点击加速补贴：直接跳转首页');
				uni.showLoading({
					title: ''
				})
				this.timer = setTimeout(() => {
					uni.hideLoading()
					uni.switchTab({
						url: '/pages/newIndex/newIndex'
					})
				}, 1000)
			},
			exitQueue() {
				// 退出队列：清空在花币，退出队列，消费状态修改为已退出
				console.log('exitQueue');
			},
			gotoJumpQueuePage(bsItem) {
				// 去插队：激励广告，看完就随机增加排队1-5，每天最多三次。看激励广告是否能够返回次数
				console.log('点击加速补贴：直接跳转【插队页】');
				uni.showLoading({
					title: ''
				})
				this.timer = setTimeout(() => {
					uni.hideLoading()
					uni.navigateTo({
						url: '/pages/newMy/jumpQueue/jumpQueue?consume_id=' + bsItem._id +
							'&business_id=' + bsItem.business_id
					})
				}, 1000)
			}
		},
		onUnload() {
			console.log('清除计时器');
			if (this.timer) {
				clearTimeout(this.timer);
				this.timer = null;
			}
		}
	}
</script>

<style>
	page {
		background: #eaeaea;
	}

	.myContent {
		width: 100%;
		height: 100%;
		margin: 0 auto;
	}

	.my_card {
		flex-direction: row;
		display: flex;
		height: 200rpx;
	}

	.card_container {
		border-radius: 40rpx;
		width: 95%;
		/* margin-top: 10rpx; */
		margin-left: 20rpx;
		margin-top: 25rpx;
		padding-bottom: 30rpx;
		background: white;
		margin-bottom: 40rpx;
	}

	.divider {
		width: 1px;
		height: 60px;
		border-left: 1px dashed #cecece;
		margin-top: 50rpx;
	}

	.first_cloumn {
		width: 30%;
		/* background-color: green; */
		text-align: center;
		align-self: center;
	}

	.second_cloumn {
		width: 40%;
		text-align: center;
		align-self: center;

	}

	.third_cloumn {
		width: 30%;
		text-align: center;
		align-self: center;
	}

	.button_word {
		/* margin-bottom: 10rpx; */
		font-size: 30rpx;
		font-weight: 600;
		color: white;
		background-color: black;
		border-radius: 15rpx;
		width: 90%;
	}

	.paiwei {
		font-size: 34rpx;
		margin-top: 15rpx;

	}

	.paiwei_num {
		font-size: 36rpx;
		margin-top: 30rpx;
		/* margin-left: -10rpx; */
	}



	.second_bs {
		margin-top: 30rpx;
		font-size: 28rpx;
	}

	.second_amount {
		font-size: 28rpx;
	}

	.second_pay_time {
		font-size: 28rpx;
	}


	.allowence_status {
		font-size: 36rpx;
		font-weight: 500;
	}

	.button_list {
		display: flex;
	}

	.queue_button {
		width: 30%;
	}

	.exit_button {
		width: 40%;
	}

	.allowence_button {
		width: 30%;
	}

	.button_word_queue {
		font-size: 30rpx;
		font-weight: 600;
		color: white;
		background-color: black;
		border-radius: 15rpx;
		width: 80%;
	}

	.button_word_queue_disable {
		font-size: 30rpx;
		font-weight: 600;
		color: white;
		background-color: #cecece;
		border-radius: 15rpx;
		width: 80%;
	}

	.button_word_exit {
		font-size: 30rpx;
		font-weight: 600;
		color: white;
		background-color: black;
		border-radius: 15rpx;
		width: 70%;
	}

	.button_word_exit_disable {
		font-size: 30rpx;
		font-weight: 600;
		color: white;
		background-color: #cecece;
		border-radius: 15rpx;
		width: 70%;
	}

	.button_word_allowence {
		font-size: 30rpx;
		font-weight: 600;
		color: white;
		background-color: black;
		border-radius: 15rpx;
		width: 90%;
	}

	.button_word_allowence_disable {
		font-size: 30rpx;
		font-weight: 600;
		color: white;
		background-color: #cecece;
		border-radius: 15rpx;
		width: 90%;
	}
</style>